<template>
	<view class="content" :class="{hide:hide}">
		<view class="banner"></view>
		<view class="broadcast">
      <u-icon name="volume-fill" color="#fff" size="20"></u-icon>
      <view class="carousel">
        <swiper :vertical="true" :circular="true" :autoplay="true" :interval="3000" :duration="1000">
          <swiper-item>
            <view class="swiper-item">暂无资讯</view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">暂无资讯</view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <u-row class="desc-img" gutter="16">
      <u-col span="4">
        <view class="demo-layout ">
          <image :src="require('@/static/image/1.png')"></image>
          <text>高额度</text>
        </view>
      </u-col>
      <u-col span="4">
        <view class="demo-layout ">
          <image :src="require('@/static/image/3.png')"></image>
          <text>放款快</text>
        </view>
      </u-col>
      <u-col span="4">
        <view class="demo-layout ">
          <image :src="require('@/static/image/2.png')"></image>
          <text>低利息</text>
        </view>
      </u-col>
    </u-row>
    <view class="wrap">
      <view class="title">您可领取的额度：</view>
      <view class="money">
        <text class="icon">￥</text><text class="num">{{value}}</text>
      </view>
      <view class="money-box">
        <view class="head">
          <view>3000</view>
          <view>80000</view>
        </view>
        <view>
          <slider @change="sliderChange"  @changing="sliderChange" step="1000" :value="value" min="3000" max="80000" />
        </view>
      </view>
      <view class="term">
        <view class="term-tit">借款期限（月）</view>
        <view class="term-list">
          <view @click="handleChangeType(1.015)" :class="{'active':type===1.015}" class="term-item">3</view>
          <view @click="handleChangeType(1.03)" :class="{'active':type===1.03}" class="term-item">6</view>
          <view @click="handleChangeType(1.045)" :class="{'active':type===1.045}" class="term-item">9</view>
          <view @click="handleChangeType(1.06)" :class="{'active':type===1.06}" class="term-item ">12</view>
        </view>

        <view class="interest">
          <view>还款利息</view>
          <view>{{interest}}元</view>
        </view>
        <u-button @click="handleToMoney" ripple class="sub-btn"  shape="circle" type="primary">立即拿钱</u-button>
        <view class="desc">额度与息费以持牌机构最终放款为准</view>
      </view>
    </view>
    <login  v-if="login"></login>
	</view>
</template>

<script>
import login from "@/pages/index/login";
import {mapState} from 'vuex'
import {getToken} from "@/cookie";
import {handleToAttest} from "@/utils";
import {getUserInfo} from "../../cookie";
	export default {
	  components:{
      login
    },
		data() {
			return {
        list: [{
          txt: '111'
        },
          {
            txt: '111'
          },
          {
            txt: '222'
          }
        ],
        value:40000,
        type:1.06,
        interest:8400,
        hide:true
			}
		},
    created() {
    },
    computed:{
	    ...mapState({
        login:'showLogin'
      })
    },
    onShow(){
      console.log('------------')
      console.log(getUserInfo())
      if( getUserInfo() === null || getUserInfo().isPay !== '2' ){
        this.hide = false
        return
      }
      if( getUserInfo() && getUserInfo().isPay ==='2' ){
        uni.setTabBarItem({
          index:0,
          text:"权益",
          pagePath:"/pages/index/index2"
        })
        uni.switchTab({
          url:"/pages/index/index2"
        })
      }
    },
    methods: {
      sliderChange(res){
        this.interest = Math.ceil(res.detail.value * this.type - res.detail.value)
        this.value = res.detail.value
      },
      handleChangeType(res){
        this.type = res
        this.interest = Math.ceil(this.value * this.type - this.value)
      },

      handleToMoney(){
        if( this.$store.getters.getToken ){
          handleToAttest()
        }else{
          this.$store.dispatch('handleChangeLogin',true)
        }
        /*uni.navigateTo({
          url:'/pages/user/attest1'
        })*/
        //
        // uni.hideTabBar()
      }
		}
	}
</script>

<style lang="scss" scoped>

.banner {
  width: 750rpx;
  height: 215rpx;
  background: url(../../static/image/home-banner.png) center/100% no-repeat;
}
.hide{
  opacity: 0;
}
.broadcast {
  display: flex;
  width: 100%;
  height: 80rpx;
  background-color: #FF7543;
  color: #fff;
  flex-direction: row;
  box-sizing: border-box;
  padding: 0 20rpx;
  .carousel {
    width: 680rpx;
    margin-left: 20rpx;
    swiper{
      height: 80rpx;
      .swiper-item{
        line-height: 80rpx;
      }
    }
  }
}
.desc-img{
  border-bottom: 30rpx solid #F4F4F4;
  padding-bottom: 20rpx;
}
.demo-layout{
  padding-top: 20rpx;
  text-align: center;
  image{
    width: 100rpx;
    height: 100rpx;
  }
  text{
    display: block;
    color: #999;
    font-weight: bold;
  }
}
.wrap{
  background-color: #fff;
  margin-bottom: 100rpx;
  .title{
    font-size: 38rpx;
    font-weight: bold;
    box-sizing: border-box;
    padding-left: 80rpx;
    padding-top: 100rpx;
  }
  .money{
    color: #FF7543;
    text-align: center;
    margin-top: 20rpx;
    margin-bottom: 70rpx;
    .icon{
      font-size: 40rpx;
      margin-right: 20rpx;
    }
    .num{
      font-size: 80rpx;
      font-weight: bold;
    }
  }
  .money-box{
    width: 600rpx;
    margin: 0 auto;
    .head{
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      font-size: 34rpx;
      margin-bottom: 30rpx;
    }
  }
  .term{
    width: 640rpx;
    margin: 70rpx auto 0;
    .term-tit{
      font-size: 30rpx;
    }
    .term-list{
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      .term-item{
        width: 140rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border: 1px solid #ddd;
        color: #999;
        font-weight: bold;
        border-radius: 8rpx;
        &.active{
          border-color: #FF7543;
        }
      }
    }
    .interest{
      display: flex;
      justify-content: space-between;
      margin-top: 70rpx;
      margin-bottom: 70rpx;
      font-size: 30rpx;
    }
    .desc{
      font-size: 24rpx;
      color: #555;
      text-align: center;
      margin-top: 40rpx;
      margin-bottom: 30rpx;
      padding-bottom: 80rpx;
    }
  }
}
::v-deep uni-slider{
  margin-left: 0;
  margin-right: 0;
}
::v-deep uni-slider .uni-slider-handle-wrapper{
  height: 20rpx;
  background-color: #FF7543;
}
::v-deep uni-slider .uni-slider-thumb{
  width: 80rpx !important;
  height: 80rpx !important;
  margin-left: -46rpx !important;
  margin-top: -40rpx !important;
  background: linear-gradient(to right,#FFBB61,#FF7543);
}
::v-deep uni-slider .uni-slider-handle{
  background-color: #FF7543;
  width: 40rpx;
  height: 40rpx;
  margin-top: -20rpx;
}
::v-deep .uni-slider-track{
  background-color: #FF7543 !important;
}
.sub-btn{
  background: linear-gradient(to right,#FFBB61,#FF7543);
}
</style>
